<template>
  <div class="main">
    <Navi back="1"></Navi>
    <div class="item" v-if="data.name">
      <div class="head">
        <div>心情</div>
        <div v-for="i in data.mood" :key="i">
          <i class="iconfont icon-aixin"></i>
        </div>
        <div class="diary_caozuo">
          <i class="iconfont icon-jubao" @click.stop="showOperation=true"></i>
          <div class="cover" v-show="showOperation" @click.stop="showOperation=false"></div>
          <ul :class="showOperation?'active':''">
            <li>删除这条帖子</li>
            <!-- <hr style="height:1px;color:#fff"> -->
            <li>举报</li>
          </ul>
        </div>
      </div>
      <div class="body" >
        <div class="user_head_view">
          <div class="user_head">
            <img :src="my_head_icon" />
          </div>
          <div class="user_message">
            <span class="name">{{ data.name }}</span>
            <span class="signature">{{ data.Personal_signature }}</span>
          </div>
        </div>
        <div class="text_view">{{ data.text }}</div>
        <div v-if="data.img">
          <div class="img_list" v-if="data.img.length>1">
            <div class="img_item" v-for="(item, index) in data.img" :key="index" :src="item" v-aspectfill></div>
          </div>
          <div class="img_list" v-else-if="data.img.length==1">
            <img  :src="data.img[0]" style="max-height:400rem" />
          </div>
        </div>
        
      <hr style="margin-top: 15rem" size="1" />
      <div class="foot">
        <div class="foot_item">
          <i class="iconfont icon-aixin1"></i>
        </div>
        <div class="foot_item">
          <i class="iconfont icon-pinglun"></i>
        </div>
        <div class="foot_item">
          <i class="iconfont icon-zhuanfa"></i>
        </div>
      </div>
      <!-- 评论窗口 -->
      <div class="talk_view">
        <span class="no_data" v-if="!talk_list.length">暂无评论</span>
        <div class="talk_item" v-for="(item,index) in talk_list" :key="index">
          <div class="talk_item_top">
            <img :src="item.head_icon" alt="">
            <span class="name">{{item.pinglun_user_name}}</span>
            <span class="time">{{$time(item.time)}}</span>
          </div>
          <div class="talk_item_content">{{item.text}}</div>
        </div>
      </div>
    </div>
    </div>
    <div class="pinglunView">
      <input class="wjhinput" type="text" name="" id="" v-model="talk">
      <button @click.stop="add_talk()">发送</button>
    </div>
  </div>
</template>
<script>
export default {
  created() {
    
    let data=JSON.parse(this.$route.query.data) 
    let dataKey=Object.keys(data)
    this.data=data
    this.get_data()
    console.log(this.$time())
    //console.log(JSON.parse(this.$route.query.data) )
  },
  data() {
    return {
      showOperation:false,
      data:{},
      talk_list:[],
      page:1,
      limit:10,
      talk:""
    };
  },
  methods: {
    add_talk(){
      this.$ajax.post('huifu_pinglun',{
        diary_id:this.data.id,
        text:this.talk
      },res=>{
        alert('评论成功')
      })
    },
    get_data(){
      this.$ajax.post('get_pinglun',{
        id:this.data.id,
        page:this.page,
        limit:this.limit
      },res=>{
        this.talk_list=res.data
      })
    },
    accepted() {
      this.$emit("emit");
    },
    
  },

  computed: {
    my_head_icon() {
      return sessionStorage.getItem("head_icon") || "123";
    },
    
  },
};
</script>
<style lang="less" scoped>
.main {
  min-height: 100vh;
  box-sizing: border-box;
  background: #f8f8f8;
  .item {
    background: #fff;
    border-radius: 10rem;
    font-size: 40rem;
    padding: 20rem;
    padding-bottom: 110rem;
    height: calc(100vh - 100rem);
    overflow: scroll;
    .head {
      i {
        font-size: 40rem;
      }
      .icon-aixin {
        color: red;
      }
      display: flex;
      align-items: center;
      .diary_caozuo {
        z-index: 1;
        flex: 1;
        display: flex;
        justify-content: flex-end;
        position: relative;
        .cover{
          position: fixed;
          left: 0;
          top: 0;
          width: 100%;
          height: 100vh;
          background: rgba(0, 0, 0, 0.5);
        }
        .active{
          height: 144rem;
          transition: height .3s;
        }
        ul{
            overflow: hidden;
            height: 0rem;
            font-size: 30rem;
            position: absolute;
            top: 50rem;
            display: flex;
            flex-direction: column;
            background: #f8f8f8;
            border-radius: 10rem;
            transition: height 1s;
            li{
                  padding: 20rem 10rem;
                  border-bottom: 1px solid #fff;
            }
        }
      }
    }
    .body {
      margin-top: 30rem;
      .user_head_view {
        display: flex;
        .user_head img {
          width: 100rem;
          height: 100rem;
          margin-right: 30rem;
        }
        .user_message {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: flex-start;
        }
      }
      .text_view {
        padding: 0 20rem;
        margin: 30rem 0rem;
        text-align: left;
        text-indent: 2em;
        word-break: break-all;
      }
      .img_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 70%;
        .img_item {
            margin:10rem;
          width: 200rem;
          height: 200rem;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .foot {
      margin: 15rem 0rem;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10rem;
      font-size: 40rem;
      font-weight: 500;
      .foot_item {
        flex: 1;
        justify-items: center;
      }
    }
    .talk_view {
      padding: 30rem 0;
      border-top: 1px solid #8f8f8f;
      .no_data{
          color: #8f8f8f;
    font-weight: 600;
      }
      .talk_item{
          text-align: left;
          margin-bottom: 15rem;
          transform-origin: top center;
          transform: rotateX(0);
          margin-bottom: 50rem;
          .talk_item_top{
            display: flex;
            align-items: center;
            margin: 30rem;
            img{
                  width: 80rem;
                  height: 80rem;
                  margin-right: 20rem;
            }
            .name{
              font-weight: 600;
            }
            .time{
              flex: 1;
              text-align: right;
              color: #d4d4d4;
              font-size: 30rem;
            }
          }
          .talk_item_content{
            margin: 0 30rem;
            font-size: 30rem;
          }
      }
    }
  }
}
.pinglunView{
  border-top: 1px solid #dadada;
  display: flex;
    position: fixed;
    bottom: 10rem;
    width: 100%;
    justify-content: center;
    align-items: center;
    background: #fff;
    padding: 20rem;
    input{
          background: #f8f8f8;
    }
    button{
      padding: 20rem 34rem;
      margin: 0 20rem;
      background: #a295ea;
      border-radius: 10rem;
      color: #fff;
      font-size: 1rem;
    }
}
</style>